﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>ToDoList—最简单的待办事项列表</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>

  <body>
    <header>
      <section>
        <label for="title">ToDoList</label>
        <input
          type="text"
          id="title"
          name="title"
          placeholder="添加ToDo"
          required="required"
          autocomplete="off"
        />
      </section>
    </header>
    <section>
      <h2>正在进行/待办 <span id="todocount"></span></h2>
      <ol id="todolist" class="demo-box">
        <!-- <li>
          <input type="checkbox" />
          <p>测试</p>
          <a href="javascript:;"></a>
        </li> -->
      </ol>
      <h2>已经完成 <span id="donecount"></span></h2>
      <ul id="donelist">
        <!-- <li>
          <input type="checkbox" />
          <p>吃饭</p>
          <a href="javascript:;"></a>
        </li> -->
      </ul>
    </section>
    <footer></footer>

    <script>
      const input = document.querySelector('#title')
      const donelist = document.querySelector('#donelist')
      const todolist = document.querySelector('#todolist')
      const todocount = document.querySelector('#todocount')
      const donecount = document.querySelector('#donecount')

      // 输入框键盘事件
      const data = []
      input.addEventListener('keyup', (e) => {
        if (e.key === 'Enter' && input.value != '') {
          const data = JSON.parse(localStorage.getItem('data'))
          const obj = { name: input.value, status: 'unchecked' }
          data.push(obj)
          localStorage.setItem('data', JSON.stringify(data))
          input.value = ''
          render()
        }
      })
      render()
      // 渲染函数
      function render() {
        const data = JSON.parse(localStorage.getItem('data'))
        document.getElementById('todolist').innerHTML = ''
        document.getElementById('donelist').innerHTML = ''
        data.forEach((item, index) => {
          if (item.status === 'unchecked') {
            const Li = document.createElement('li')
            Li.innerHTML = `<input type="checkbox" data-id="${index}"/>
                  <p>${item.name}</p>
                  <a href="javascript:;" data-id="${index}"></a>
                `
            document.getElementById('todolist').appendChild(Li)
            document.getElementById('todocount').innerText =
              document.querySelectorAll('#todolist li').length
          } else {
            const Li = document.createElement('li')
            Li.innerHTML = `<input type="checkbox" data-id="${index}"/>
                  <p>${item.name}</p>
                  <a href="javascript:;" data-id="${index}"></a>
                `
            document.getElementById('donelist').appendChild(Li)
            document.getElementById('donecount').innerText =
              document.querySelectorAll('#donelist li').length
          }
        })
      }

      // 点击事件  删除 新增
      function click(e, flag) {
        const data = JSON.parse(localStorage.getItem('data'))
        // render()
        // console.log(e)
        // console.log(e.target.tagName)
        if (e.target.tagName == 'INPUT') {
          // console.log(data)
          // console.log(e.target.dataset.id)
          // console.log(data[e.target.dataset.id])
          const v = data[e.target.dataset.id]
          // console.log(v.status)
          if (!flag) {
            v.status = 'checked'
          } else {
            v.status = 'unchecked'
          }
        } else if (e.target.tagName == 'A') {
          // console.log(e.target.dataset.id)
          data.splice(e.target.dataset.id, 1)
        }
        localStorage.setItem('data', JSON.stringify(data))
        render()
      }
      document.querySelector('#todolist').addEventListener('click', (e) => {
        click(e, false)
      })
      document.querySelector('#donelist').addEventListener('click', (e) => {
        click(e, true)
      })
    </script>
  </body>
</html>
